<template>
  <div class="app-container">
      <h2 style="text-align:center;">课程信息</h2>
      <el-steps :active="1" process-status="wait" align-center style="margin-bottom:40px;">
          <el-step title="填写课程基本信息"/>
          <el-step title="创建课程大纲"/>
          <el-step title="提交审核"/>
      </el-steps>

      <el-form label-width="120px">
          <el-form-item label="课程标题">
              <el-input v-model="courseInfo.title" placeholder="示例：机器学习项目课：从基础到搭建项目视频课。专业名称注意大小写"/>
          </el-form-item>

          <el-form-item label="课程分类">
              <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="getTwoSubject">
                  <el-option
                      v-for="subject in subjectOneList"
                      :key="subject.id"
                      :label="subject.title"
                      :value="subject.id">
                  </el-option>
              </el-select>
              <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
                  <el-option
                      v-for="subject in subjectTwoList"
                      :key="subject.id"
                      :label="subject.title"
                      :value="subject.id">
                  </el-option>
              </el-select>
          </el-form-item>

          <el-form-item label="课程讲师">
              <el-select v-model="courseInfo.teacherId" placeholder="请选择">
                  <el-option
                      v-for="teacher in teacherList"
                      :key="teacher.id"
                      :label="teacher.name"
                      :value="teacher.id">
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="总课时">
              <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
          </el-form-item>
          <el-form-item label="课程简介">
              <tinymce :height="300" v-model="courseInfo.description" />
          </el-form-item>

          <el-form-item label="课程封面">
              <el-upload :show-file-list="false" :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload" :action="BASE_API+'/eduoss/fileoss'" class="avatar-uploader">
                  <img :src="courseInfo.cover"/>
              </el-upload>
          </el-form-item>
          <el-form-item label="课程价格">
              <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/>元
          </el-form-item>
          <el-form-item>
              <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
          </el-form-item>
      </el-form>
  </div>
</template>

<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
import Tinymce from '@/components/Tinymce'   // 引入富文本编辑器
export default {
    components : {
        Tinymce
    },
    data(){
        return {
            saveBtnDisabled : false,
            courseInfo : {
                subjectId : '',
                cover : '/static/01.jpg',
                subjectParentId : ''
            },
            teacherList : [],
            subjectOneList : [],
            subjectTwoList : [],
            BASE_API : process.env.BASE_API,
            courseId : ''
        }
    },
    watch: {
        $route(to, from){
            this.init()
        }   
    },
    created(){
        this.init()
    },
    methods: {
        init(){
            // 获取路由 id 值
            if(this.$route.params && this.$route.params.id){
                this.courseId = this.$route.params.id
                this.getInfo()
            }else{
                // 初始化所有一级分类
                this.courseInfo = {
                    subjectId : '',
                    cover : '/static/01.jpg',
                    subjectParentId : ''
                },
                this.getAllOneSubject()
            }
            // 初始化所有讲师
            this.getListTeacher()
        },
        // 根据课程 id 查询信息
        getInfo(){
            course.getCourseInfoById(this.courseId)
                .then(response => {
                    this.courseInfo = response.data.item
                    subject.getSubjectList()
                        .then(response => {
                            this.subjectOneList = response.data.list
                            for(let i of this.subjectOneList){
                                if (this.courseInfo.subjectParentId === i.id){
                                    this.subjectTwoList = i.children
                                    break
                                }
                            }
                        })
                })
        },
        // 上传封面成功调用的方法
        handleAvatarSuccess(res, file){
            console.log(res)
            this.courseInfo.cover = res.data.url
        },
        // 上传之前调用的方法
        beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpg' || file.type === 'image/jpeg'
            const isLt2M = file.size/1024/1024 < 2
            if (!isJPG){
                this.$message.error('上传图片只能是 JPG 格式！')
            }
            if (!isLt2M){
                this.$message.error('上传图片大小不能超过 2MB！')
            }
            return isJPG && isLt2M
        },

        // 点击一级分类获取二级分类
        getTwoSubject(value){
            // value 就是一级分类的id值
            for(let i of this.subjectOneList){
                if (i.id === value){
                    this.subjectTwoList = i.children
                    this.courseInfo.subjectId = ''
                }
            }
        },

        // 查询所有一级分类
        getAllOneSubject(){
            subject.getSubjectList()
                .then(response => {
                    this.subjectOneList = response.data.list
                })
        },

        // 查询所有讲师
        getListTeacher(){
            course.getListTeacher()
                .then(response => {
                    this.teacherList = response.data.items
                })
        },

        // 保存课程信息并下一步
        saveOrUpdate(){
            if(this.courseInfo.id){
                this.updateCourse()
            }else{
                this.saveCourse()
            }
        },

        // 保存课程信息
        saveCourse(){
            course.addCourseInfo(this.courseInfo)
                .then(response => {
                    // 提示
                    this.$message({
                        type : 'success',
                        message : '添加课程信息成功'
                    });
                    // 跳转到第二步
                    this.$router.push({ path: '/course/chapter/' + response.data.courseId})
                })
        },

        // 修改课程信息
        updateCourse(){
            course.updateCourseInfo(this.courseInfo)
                .then(response => {
                    this.$message({
                        type : 'success',
                        message : '修改课程信息成功'
                    });
                    // 跳转到第二步
                    this.$router.push({ path: '/course/chapter/' + this.courseId})
                })
        }
    }
}
</script>

<style scoped>
.tinymce-container{
    line-height: 29px;
}
</style>